<h2 translate>Status</h2>

<fieldset class="cbi-section">
	<legend translate>System</legend>

	<div class="l2-grid l2-grid-hover">
		<div class="row">
			<div class="cell clearfix content col-xs-4" translate>
				Hostname
			</div><div class="cell clearfix content nowrap col-xs-8">
				{{system.hostname}}
			</div>
		</div>

		<div class="row">
			<div class="cell clearfix content col-xs-4" translate>
				Model
			</div><div class="cell clearfix content nowrap col-xs-8">
				{{system.system}}
			</div>
		</div>

		<div class="row">
			<div class="cell clearfix content col-xs-4" translate>
				Firmware Version
			</div><div class="cell clearfix content nowrap col-xs-8">
				{{system.release.description}}
			</div>
		</div>

		<div class="row">
			<div class="cell clearfix content col-xs-4" translate>
				Kernel Version
			</div><div class="cell clearfix content nowrap col-xs-8">
				{{system.kernel}}
			</div>
		</div>

		<div class="row">
			<div class="cell clearfix content col-xs-4" translate>
				Local Time
			</div><div class="cell clearfix content nowrap col-xs-8">
				{{system.localtime}}
			</div>
		</div>

		<div class="row">
			<div class="cell clearfix content col-xs-4" translate>
				Uptime
			</div><div class="cell clearfix content nowrap col-xs-8">
				{{system.uptime}}
			</div>
		</div>

		<div class="row">
			<div class="cell clearfix content col-xs-4" translate>
				Load Average
			</div><div class="cell clearfix content nowrap col-xs-8">
				{{system.load}}
			</div>
		</div>
	</div>
</fieldset>

<fieldset class="cbi-section">
	<legend translate>Memory</legend>

	<div class="l2-grid l2-grid-hover">
		<div class="row">
			<div class="cell clearfix content col-xs-4" translate>
				Total Available
			</div><div class="cell clearfix content col-xs-8">
				<div class="progress">
					<div class="progress-bar progress-bar-info" style="width: {{system.memory.pc_total}}%"></div>
					<small>
						{{(system.memory.free + system.memory.buffered) / 1024}} kB /
						{{system.memory.total / 1024}} kB
						({{system.memory.pc_total}}%)
					</small>
				</div>
			</div>
		</div>

		<div class="row">
			<div class="cell clearfix content col-xs-4" translate>
				Free
			</div><div class="cell clearfix content col-xs-8">
				<div class="progress">
					<div class="progress-bar progress-bar-info" style="width: {{system.memory.pc_free}}%"></div>
					<small>
						{{system.memory.free / 1024}} kB /
						{{system.memory.total / 1024}} kB
						({{system.memory.pc_free}}%)
					</small>
				</div>
			</div>
		</div>

		<div class="row">
			<div class="cell clearfix content col-xs-4" translate>
				Cached
			</div><div class="cell clearfix content col-xs-8">
				<div class="progress">
					<div class="progress-bar progress-bar-info" style="width: {{system.memory.pc_shared}}%"></div>
					<small>
						{{system.memory.shared / 1024}} kB /
						{{system.memory.total / 1024}} kB
						({{system.memory.pc_shared}}%)
					</small>
				</div>
			</div>
		</div>

		<div class="row">
			<div class="cell clearfix content col-xs-4" translate>
				Buffered
			</div><div class="cell clearfix content col-xs-8">
				<div class="progress">
					<div class="progress-bar progress-bar-info" style="width: {{system.memory.pc_buffered}}%"></div>
					<small>
						{{system.memory.buffered / 1024}} kB /
						{{system.memory.total / 1024}} kB
						({{system.memory.pc_buffered}}%)
					</small>
				</div>
			</div>
		</div>
	</div>
</fieldset>

<fieldset class="cbi-section" ng-if="system.swap.total > 0">
	<legend translate>Swap</legend>

	<div class="l2-grid l2-grid-hover">
		<div class="row">
			<div class="cell clearfix content col-xs-4" translate>
				Free
			</div><div class="cell clearfix content col-xs-8">
				<div class="progress">
					<div class="progress-bar progress-bar-info" style="width:{{system.swap.pc_free}}%"></div>
					<small>
						{{system.swap.free / 1024}} kB /
						{{system.swap.total / 1024}} kB
						({{system.swap.pc_free}}%)
					</small>
				</div>
			</div>
		</div>
	</div>
</fieldset>

<fieldset class="cbi-section">
	<legend translate>Storage</legend>

	<div class="l2-grid l2-grid-hover">
		<div class="row">
			<div class="cell clearfix content col-xs-4" translate>
				Root Usage (/)
			</div><div class="cell clearfix content col-xs-8">
				<div class="progress">
					<div class="progress-bar progress-bar-info" style="width: {{system.root.pc_used}}%"></div>
					<small>
						{{system.root.used / 1024}} kB /
						{{system.root.total / 1024}} kB
						({{system.root.pc_used}}%)
					</small>
				</div>
			</div>
		</div>

		<div class="row">
			<div class="cell clearfix content col-xs-4" translate>
				Temporary Usage (/tmp)
			</div><div class="cell clearfix content col-xs-8">
				<div class="progress">
					<div class="progress-bar progress-bar-info" style="width: {{system.tmp.pc_used}}%"></div>
					<small>
						{{system.tmp.used / 1024}} kB /
						{{system.tmp.total / 1024}} kB
						({{system.tmp.pc_used}}%)
					</small>
				</div>
			</div>
		</div>
	</div>
</fieldset>

<fieldset class="cbi-section" ng-if="wan || wan6">
	<legend translate>Network</legend>

	<div class="l2-grid l2-grid-hover">
		<div class="row" ng-if="wan">
			<div class="cell clearfix content col-xs-12 col-md-2" translate>
				IPv4 WAN Status
			</div><div class="cell clearfix content col-xs-3 col-md-2" style="text-align: right;">
				<span ng-if="wan.dev" class="badge" title="{{wan.dev.description()}}">
					<img ng-src="{{wan.dev.icon()}}"> {{wan.dev.name()}}
				</span>
			</div><div class="cell clearfix content col-xs-9 col-md-6">
				<span class="nowrap">• <strong translate>Type</strong>: {{wan.getProtocol().description}}</span>
				<span class="nowrap">• <strong translate>Connected</strong>: {{wan.getUptime() | format:'%t'}}</span>
				<span ng-if="wan.getIPv4Addrs().length" class="nowrap">• <strong translate>Address</strong>: {{wan.getIPv4Addrs().join(', ')}}</span>
				<span ng-if="wan.getIPv4Gateway()"      class="nowrap">• <strong translate>Gateway</strong>: {{wan.getIPv4Gateway()}}</span>
				<span ng-if="wan.getIPv4DNS().length"   class="nowrap">• <strong translate>DNS</strong>: {{wan.getIPv4DNS().join(', ')}}</span>
			</div>
		</div>

		<div class="row" ng-if="wan6">
			<div class="cell clearfix content col-xs-12 col-md-2" translate>
				IPv6 WAN Status
			</div><div class="cell clearfix content col-xs-3 col-md-2" style="text-align: right;">
				<span ng-if="wan6.dev" class="badge" title="{{wan6.dev.description()}}">
					<img ng-src="{{wan6.dev.icon()}}"> {{wan6.dev.name()}}
				</span>
			</div><div class="cell clearfix content col-xs-9 col-md-6">
				<span class="nowrap">• <strong translate>Type</strong>: {{wan6.getProtocol().description}}</span>
				<span class="nowrap">• <strong translate>Connected</strong>: {{wan6.getUptime() | format:'%t'}}</span>
				<span ng-if="wan6.getIPv6Addrs().length" class="nowrap">• <strong translate>Address</strong>: {{wan6.getIPv6Addrs().join(', ')}}</span>
				<span ng-if="wan6.getIPv6DNS().length"   class="nowrap">• <strong translate>DNS</strong>: {{wan6.getIPv6DNS().join(', ')}}</span>
			</div>
		</div>
	</div>
</fieldset>

<fieldset class="cbi-section">
	<legend translate>Connection Tracking</legend>

	<div class="l2-grid l2-grid-hover">
		<div class="row">
			<div class="cell clearfix content col-xs-4" translate>
				Active Connections
			</div><div class="cell clearfix content col-xs-8">
				<div class="progress">
					<div class="progress-bar progress-bar-info" style="width: {{conntrack.percent}}%"></div><small>{{conntrack.count}} / {{conntrack.limit}} ({{conntrack.percent}}%)</small>
				</div>
			</div>
		</div>
	</div>
</fieldset>

<fieldset class="cbi-section" ng-if="leases && leases.length">
	<legend translate>DHCP Leases</legend>

	<div class="l2-grid l2-grid-hover">
		<div class="row">
			<div class="cell clearfix caption nowrap col-xs-5 col-md-3" translate>
				Hostname
			</div><div class="cell clearfix caption col-xs-4 col-md-3" translate>
				IPv4-Address
			</div><div class="cell clearfix caption hidden-xs hidden-sm col-md-3" translate>
				MAC-Address
			</div><div class="cell clearfix caption nowrap col-xs-3" translate>
				Leasetime remaining
			</div>
		</div>

		<div class="row" ng-repeat="lease in leases track by lease.macaddr">
			<div class="cell clearfix content nowrap col-xs-5 col-md-3">
				{{lease.hostname || '?'}}
			</div><div class="cell clearfix content col-xs-4 col-md-3">
				{{lease.ipaddr}}
			</div><div class="cell clearfix content hidden-xs hidden-sm col-md-3">
				<span style="border-bottom: 1px dotted #ccc; cursor: pointer" ng-init="hostInfoMAC=lease.macaddr" popover-template="'hostInfoTooltip'" popover-trigger="mouseenter">
					{{lease.macaddr.toUpperCase()}}
				</span>
			</div><div class="cell clearfix content nowrap col-xs-3">
				<span ng-switch="lease.expires > 0">
					<em ng-switch-when="false" translate>expired</em>
					<span ng-switch-when="true">{{lease.expires | format:'%t'}}</em>
				</span>
			</div>
		</div>
	</div>
</fieldset>

<fieldset class="cbi-section" ng-if="leases6 && leases6.length">
	<legend translate>DHCPv6 Leases</legend>

	<div class="l2-grid l2-grid-hover">
		<div class="row">
			<div class="cell clearfix caption nowrap col-xs-4 col-md-3" translate>
				Hostname
			</div><div class="cell clearfix caption col-xs-5 col-md-3" translate>
				IPv6-Address
			</div><div class="cell clearfix caption hidden-xs hidden-sm col-md-3" translate>
				DUID
			</div><div class="cell clearfix caption nowrap col-xs-3" translate>
				Leasetime remaining
			</div>
		</div>

		<div class="row" ng-repeat="lease in leases6 track by lease.duid">
			<div class="cell clearfix content nowrap col-xs-4 col-md-3">
				{{lease.hostname || '?'}}
			</div><div class="cell clearfix content nowrap col-xs-5 col-md-3">
				{{lease.ip6addr}}
			</div><div class="cell clearfix content hidden-xs hidden-sm col-md-3" ng-init="hostInfoMAC=getMACFromDUID(lease.duid)">
				<span ng-if="hostInfoMAC" style="border-bottom: 1px dotted #ccc; cursor: pointer" popover-template="'hostInfoTooltip'" popover-trigger="mouseenter">
					{{lease.duid.toUpperCase()}}
				</span>
				<span ng-if="!hostInfoMAC">
					{{lease.duid.toUpperCase()}}
				</span>
			</div><div class="cell clearfix content nowrap col-xs-3">
				<span ng-switch="lease.expires > 0">
					<em ng-switch-when="false" translate>expired</em>
					<span ng-switch-when="true">{{lease.expires | format:'%t'}}</em>
				</span>
			</div>
		</div>
	</div>
</fieldset>

<fieldset class="cbi-section animate-repeat" ng-repeat="(radioName, radioState) in wireless track by radioState.phy | orderBy:'phy'">
	<legend ng-if="$index == 0" translate>Wireless</legend>

	<div class="l2-grid l2-grid-hover">
		<div class="row">
			<div class="cell clearfix content col-xs-3 col-md-2" style="text-align: right">
				<span ng-switch="radioState.up">
					<img ng-switch-when="true"  src="/luci-ng/icons/wifi_big.png">
					<img ng-switch-when="false" src="/luci-ng/icons/wifi_big_disabled.png">
				</span>
			</div><div class="cell clearfix content hellip col-xs-9 col-md-6">
				<big><strong class="nowrap">{{radioState.hardwareName}}</strong></big><br>
				<span ng-if="radioState.channel" class="nowrap">• <strong translate>Channel</strong>: {{radioState.channel}} ({{radioState.frequency / 1000 | format:'%.3f'}} GHz)</span>
				<span ng-if="radioState.txpower" class="nowrap">• <strong translate>TX Power</strong>: {{radioState.txpower}} dBm</span>
			</div>
		</div>

		<div class="row animate-repeat" ng-repeat="network in radioState.interfaces track by network.ifname | orderBy:'ifname'">
			<div class="cell clearfix content col-xs-3 col-md-2" style="text-align: right">
				<span class="badge" title="{{'Signal:' | translate}} {{network.signal | format:'%d dBm':'-'}} / {{'Noise:' | translate}} {{network.noise}} dBm">
					<img ng-src="/luci-ng/icons/signal-{{network | wifiSignalRange}}.png">
					{{network.ifname}}
				</span>
			</div><div class="cell clearfix content hellip col-xs-9 col-md-6">
				<span ng-if="network.mode"       class="nowrap">• <strong translate>Mode</strong>: {{network.mode}}</span>
				<span ng-if="network.bitrate"    class="nowrap">• <strong translate>Bitrate</strong>: {{network.bitrate / 1000 | format:'~ %.1f Mbit/s'}}</span>
				<span ng-if="network.ssid"       class="nowrap">• <strong translate>SSID</strong>: {{network.ssid}}</span>
				<span ng-if="network.bssid"      class="nowrap">• <strong translate>BSSID</strong>: {{network.bssid}}</span>
				<span ng-if="network.encryption" class="nowrap">• <strong translate>Encryption</strong>: {{network.encryption | wifiEncryption}}</span>
			</div>
		</div>
	</div>
</fieldset>

<fieldset class="cbi-section" ng-if="assocs && assocs.length">
	<legend translate>Associated Stations</legend>

	<div class="l2-grid l2-grid-hover">
		<div class="row">
			<div class="cell clearfix caption col-xs-3 col-md-2" style="text-align: right" translate>
				Network
			</div><div class="cell clearfix caption col-xs-4 col-md-2" translate>
				MAC-Address
			</div><div class="cell clearfix caption hidden-xs hidden-sm col-md-1" translate>
				Signal
			</div><div class="cell clearfix caption hidden-xs hidden-sm col-md-1" translate>
				Noise
			</div><div class="cell clearfix caption col-xs-5 col-md-3" translate>
				RX Rate
			</div><div class="cell clearfix caption hidden-xs hidden-sm col-md-3" translate>
				TX Rate
			</div>
		</div>

		<div class="row animate-repeat" ng-repeat="client in assocs track by client.mac | orderBy:'mac'">
			<div class="cell clearfix content col-xs-3 col-md-2" style="text-align: right">
				<span class="badge" title="{{'Signal:' | translate}} {{client.signal | format:'%d dBm':'-'}} / {{'Noise:' | translate}} {{client.noise}} dBm">
					<img ng-src="/luci-ng/icons/signal-{{client | wifiSignalRange}}.png">
					{{client.device}}
				</span>
			</div><div class="cell clearfix content col-xs-4 col-md-2">
				<span style="border-bottom: 1px dotted #ccc; cursor: pointer" ng-init="hostInfoMAC=client.mac" popover-template="'hostInfoTooltip'" popover-trigger="mouseenter">
					{{client.mac}}
				</span>
			</div><div class="cell clearfix content hidden-xs hidden-sm col-md-1">
				{{client.signal | format:'%d dBm':'-'}}
			</div><div class="cell clearfix content hidden-xs hidden-sm col-md-1">
				{{client.noise}} dBm
			</div><div class="cell clearfix content nowrap col-xs-5 col-md-3">
				{{client.rx.rate / 1000 | format:'%.1f Mbit/s'}}<span ng-if="client.rx.mcs >= 0">,
					MCS {{client.rx.mcs}},
					{{client.rx['40mhz'] ? 40 : 20}}MHz
				</span>
			</div><div class="cell clearfix content nowrap hidden-xs hidden-sm col-md-3">
				{{client.tx.rate / 1000 | format:'%.1f Mbit/s'}}<span ng-if="client.tx.mcs >= 0">,
					MCS {{client.tx.mcs}},
					{{client.tx['40mhz'] ? 40 : 20}}MHz
				</span>
			</div>
		</div>
	</div>
</fieldset>

<script type="text/ng-template" id="hostInfoTooltip">
	<small ng-init="host=getHostInfo(hostInfoMAC)">
		<span ng-if="host.name"    class="nowrap">• <strong translate>Hostname</strong>: {{host.name}}<br></span>
		<span ng-if="host.ipaddr"  class="nowrap">• <strong translate>IP address</strong>: {{host.ipaddr}}<br></span>
		<span ng-if="host.ip6addr" class="nowrap">• <strong translate>IPv6 address</strong>: {{host.ip6addr}}<br></span>
		<span ng-if="host.vendor"  class="nowrap">• <strong translate>Vendor</strong>: {{host.vendor}}<br></span>
	</small>
</script>
